<template>
	<page-wraper :safeAreaInsetBottom="false">
		<view style="margin-left: 10px; margin-right: 10px;">
			<demo-block title="" transparent>
				<wd-cell-group>
					<wd-cell title="手机号码" size="large" is-link clickable @click="modifyPhoneNumber" />
				</wd-cell-group>
				<wd-cell-group>
					<wd-cell title="登录密码" size="large" is-link clickable @click="modifyPassword" />
				</wd-cell-group>
			</demo-block>
			
			<demo-block title="" transparent>
				<wd-cell-group>
					<wd-cell title="用户服务协议" size="large" is-link clickable @click="openUserSerivceProto" />
				</wd-cell-group>
				<wd-cell-group>
					<wd-cell title="隐私政策" size="large" is-link clickable @click="openPrivacyPolicy" />
				</wd-cell-group>
			</demo-block>
			
			<demo-block title="" transparent>
				<wd-button block :round="false" type="error" @click="logout">退出登录</wd-button>
			</demo-block>
		</view>

		<wd-message-box selector="modify-phone-number">
			<wd-input label="手机号码" label-width="100px" prop="value1" clearable v-model="model1.phoneNumber"
				placeholder="请输入手机号码" :rules="[{ required: true, message: '请填写手机号码' }]" />
		</wd-message-box>
		<wd-message-box selector="modify-password">
			<wd-input label="旧密码" label-width="100px" prop="value1" clearable v-model="model2.password1"
				placeholder="请输入旧密码" :rules="[{ required: true, message: '请输入旧密码' }]" />
			<wd-input label="新密码" label-width="100px" prop="value1" clearable v-model="model2.password2"
				placeholder="请输入新密码" :rules="[{ required: true, message: '请输入新密码' }]" />
		</wd-message-box>
	</page-wraper>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
	import { clearToken } from '../../store'

	const toast = useToast()
	const message1 = useMessage('modify-phone-number')
	const message2 = useMessage('modify-password')

	const model1 = ref({ phoneNumber: '' });
	const model2 = ref({ password1: '', password2: '' });

	function logout() {
		clearToken();

		uni.redirectTo({
			url: '/pages/login/Index'
		})
	}
	
	function openUserSerivceProto() {
		uni.navigateTo({ url: '/pages/protocol/Index?type=user_service_proto&title=用户服务协议' });
	}
	
	function openPrivacyPolicy() {
		uni.navigateTo({ url: '/pages/protocol/Index?type=privacy_policy&title=隐私政策' });
	}

	function modifyPhoneNumber() {
		message1
			.confirm({
				title: '修改手机号码',
				beforeConfirm: ({ resolve }) => {
					toast.loading('删除中...')
					setTimeout(() => {
						toast.close()
						resolve(true)
						toast.success('删除成功')
					}, 2000)
				}
			})
			.then((resp) => {
				console.log(resp)
			})
			.catch((error) => {
				console.log(error)
			})
	}

	function modifyPassword() {
		message2
			.confirm({
				title: '修改密码',
				beforeConfirm: ({ resolve }) => {
					toast.loading('删除中...')
					setTimeout(() => {
						toast.close()
						resolve(true)
						toast.success('删除成功')
					}, 2000)
				}
			})
			.then((resp) => {
				console.log(resp)
			})
			.catch((error) => {
				console.log(error)
			})
	}
</script>

<style lang="scss" scoped>
	:deep(.page-wraper) {
		background: #f6f6f6;
	}
</style>